<template>
  <el-dialog
    :visible="showVisible"
    center
    :show-close="false"
    :append-to-body="true"
    :destroy-on-close="true"
    width="960px"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ isNew ? "新建验证规则" : "编辑验证规则" }}</span>
        <span class="el-icon-close g9 f26 poi" @click="handleCancel"></span>
      </div>
    </div>
    <rule-editor ref="RuleEditor"></rule-editor>
    <el-form
      class="pl30 pr30 mt30"
      :model="formData"
      ref="form"
      label-width="120px"
    >
      <el-form-item
        prop="errorMessage"
        label="异常提示信息"
        :rules="[
          {
            required: true,
            message: '异常提示信息不能为空',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          type="textarea"
          v-model="formData.errorMessage"
          style="width: 600px"
          placeholder="请输入异常提示信息"
          :maxlength="200"
          show-word-limit
        />
      </el-form-item>

      <el-form-item prop="localism" label="提示信息国际化">
        <GlobalizationConfigWord
          :localism="formData.localism"
          @setLangCode="setLangCode"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import GlobalizationConfigWord from "@/components/globalizationConfigWord.vue";
import ruleEditor from "./ruleEditor/ruleEditor";
import { cloneDeep } from "lodash";
export default {
  name: "RuleForm",
  props: {
    modelInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    ruleEditor,
    GlobalizationConfigWord,
  },
  data() {
    return {
      index: 0,
      loading: false,
      serviceList: [],
      showVisible: false,
      formData: {},
    };
  },

  computed: {
    isNew() {
      return !this.formData.id;
    },
  },

  created() {},

  methods: {
    setLangCode(props) {
      this.formData.localism = props;
    },
    addForm(recordData = {}, index = 0) {
      const record = cloneDeep(recordData);
      this.showVisible = true;
      this.index = index;
      this.formData = {
        ...record,
        errorMessage: "",
        localism: "",
      };
      this.$nextTick(() => {
        this.$refs.RuleEditor.init(this.modelInfo);
        this.$refs.form.clearValidate();
      });
    },

    editForm(recordData = {}, index = 0) {
      const record = cloneDeep(recordData);
      this.showVisible = true;
      this.formData = {
        localism: "",
        ...record,
      };
      this.index = index;

      this.$nextTick(() => {
        this.$refs.RuleEditor.init(this.modelInfo, record.validationRule);
        this.$refs.form.clearValidate();
      });
    },

    async submit() {
      try {
        await this.$refs.form.validate();
        const ruleRes = this.$refs.RuleEditor.validate();
        if (!ruleRes) return;
        const ruleData = {
          index: this.index,
          errorMessage: this.formData.errorMessage,
          localism: this.formData.localism,
          validationRule: ruleRes,
        };
        this.handleCancel();
        this.$emit("ok", ruleData);
      } catch (error) {
        console.log(error);
      }
    },
    handleCancel() {
      this.showVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-plus {
  margin-left: 10px;
  font-size: 16px;
  color: #409eff;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  top: 0px;
}
</style>
